<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/login.css">
    <style>
        .article .header {
            display: flex;
            width: 1200px;
            margin: 0 auto;
        }
        
        .article .header h4 a {
            font-size: 30px;
            height: 50px;
            line-height: 50px;
            color: rgb(8, 32, 8);
            margin-left: 300px;
        }
        
        .article .header h4 a:hover {
            color: red;
        }
    </style>
</head>

<body>
    <article class="article">
        <header class="header">
            <img src="../static/img/taoshu-logo.jpg" alt="">
            <h4><a href="../index.html">返回首页</a></h4>
        </header>
        <div class="cont">
            <div class="login">
                <div class="hd">
                    <ul>
                        <li>淘书会员</li>
                        <li><a href="register.html">免费注册</a></li>
                    </ul>
                </div>
                <div class="bd">
                    <div class="name">账号：<input type="text" name="" id="user"></div>
                    <div class="pwd"> 密码：<input type="text" id="pass"></div>
                    <div class="sub"><input type="submit" value="登录" id="btn1" width="20px"></div>
                    <span class="msg"></span>
                </div>

            </div>
        </div>
        <footer class="footer">
            <div class="footer-nav">
                <a href="">关于淘书</a>
                <a href="">诚征英才</a>
                <a href="">图书目录</a>
                <a href="">免费条款</a>
                <a href="">联系我们</a>
            </div>
            <div class="copyright">Copyright © 2012-2015 淘书网 Taoshu.com 版权所有</div>
        </footer>
    </article>
</body>
<script src="../js/ajax-promise.js"></script>
<script>
    class Login {
        constructor() {
            this.user = document.getElementById("user");
            this.pass = document.getElementById("pass");
            this.btn1 = document.getElementById("btn1");
            this.msg = document.querySelector(".msg");
            this.url = "http://api.icodeilife.cn:81/user";
            this.addEvent()
        }
        addEvent() {
            var that = this;
            this.btn1.onclick = function() {
                that.u = that.user.value;
                that.p = that.pass.value;
                that.load();
            }
        }
        load() {
            ajax({
                url: this.url,
                data: {
                    type: "login",
                    user: this.u,
                    pass: this.p
                }
            }).then((res) => {
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display() {
            switch (this.res.code) {
                case 0:
                    this.msg.innerHTML = this.res.msg + "，3秒后到注册";
                    setTimeout(() => {
                        location.href = "register.html";
                    }, 3000);
                    break;
                case 1:
                    this.msg.innerHTML = "登录成功，3秒后到首页";
                    setTimeout(() => {
                        location.href = "../index.html";
                    }, 3000);
                    sessionStorage.setItem("userMsg", JSON.stringify(this.res.msg));
                    break;
                case 2:
                    this.msg.innerHTML = this.res.msg + "，请重新输入";
                    this.user.value = this.pass.value = "";
                    this.user.focus();
            }
        }
    }
    new Login;
</script>

</html>